import { useEffect, useState, useMemo } from 'react';
import { Row, Col, Carousel, Tabs, Empty } from 'antd';
import classNames from 'classnames';
import Slick from './Slick';
import styles from './index.less';

const { TabPane } = Tabs;
export default () => {
  const exhibitionList = useMemo(
    () => ({
      data: {
        result: [
          {
            id: 2370,
            xxNo: '150202dhqnqjxx',
            bjNo: 'btdhnqjxx202203',
            author: '左邻炜等同学',
            title: '积分达人',
            memo: '各项评选表现出色',
            addOn: '2023-03-13 15:36:18',
            addBy: '15849288887',
            type: 1,
            typeName: '荣誉',
            images: [
              {
                url: 'https://assets.iwisesoft.com/exhibition/2370/0C636CFD-6526-46F9-A592-F4BF9B1FE918.jpeg',
                preview:
                  'https://assets.iwisesoft.com/exhibition/2370/0C636CFD-6526-46F9-A592-F4BF9B1FE918.thumb.png',
              },
              {
                url: 'https://assets.iwisesoft.com/exhibition/2370/33412A1F-BFC5-4C1A-8C37-8CD9AB4EE588.jpeg',
                preview:
                  'https://assets.iwisesoft.com/exhibition/2370/33412A1F-BFC5-4C1A-8C37-8CD9AB4EE588.thumb.png',
              },
              {
                url: 'https://assets.iwisesoft.com/exhibition/2370/F0CA667A-D5C0-4A3B-8239-1FE6FA96EEE9.jpeg',
                preview:
                  'https://assets.iwisesoft.com/exhibition/2370/F0CA667A-D5C0-4A3B-8239-1FE6FA96EEE9.thumb.png',
              },
            ],
            idNe: 0,
            idList: null,
          },
          {
            id: 2369,
            xxNo: '150202dhqnqjxx',
            bjNo: 'btdhnqjxx202203',
            author: '丁萧宇杨舒萌',
            title: '积分达人',
            memo: '各项评选表现突出',
            addOn: '2023-03-13 15:34:28',
            addBy: '15849288887',
            type: 1,
            typeName: '荣誉',
            images: [
              {
                url: 'https://assets.iwisesoft.com/exhibition/2369/552F56F5-F30A-4022-A58D-919525CCC035.jpeg',
                preview:
                  'https://assets.iwisesoft.com/exhibition/2369/552F56F5-F30A-4022-A58D-919525CCC035.thumb.png',
              },
            ],
            idNe: 0,
            idList: null,
          },
          {
            id: 2218,
            xxNo: '150202dhqnqjxx',
            bjNo: 'btdhnqjxx202203',
            author: '一三班小朋友',
            title: '读书之星',
            memo: '每日坚持读书',
            addOn: '2022-09-28 17:11:55',
            addBy: '15849288887',
            type: 1,
            typeName: '荣誉',
            images: [
              {
                url: 'https://assets.iwisesoft.com/exhibition/2218/D8455238-592C-40EE-A565-61B771C77C2F.jpeg',
                preview:
                  'https://assets.iwisesoft.com/exhibition/2218/D8455238-592C-40EE-A565-61B771C77C2F.thumb.png',
              },
              {
                url: 'https://assets.iwisesoft.com/exhibition/2218/E829C5D9-02F5-467F-9344-A3FEA30DC87A.jpeg',
                preview:
                  'https://assets.iwisesoft.com/exhibition/2218/E829C5D9-02F5-467F-9344-A3FEA30DC87A.thumb.png',
              },
            ],
            idNe: 0,
            idList: null,
          },
          {
            id: 2217,
            xxNo: '150202dhqnqjxx',
            bjNo: 'btdhnqjxx202203',
            author: '一三班小朋友',
            title: '讲故事',
            memo: '我是故事大王',
            addOn: '2022-09-28 15:30:50',
            addBy: '15849288887',
            type: 0,
            typeName: '优秀作品',
            images: [
              {
                url: 'https://assets.iwisesoft.com/exhibition/2217/062D4AE8-0AF2-487B-9AF9-8E4729B99F03.jpeg',
                preview:
                  'https://assets.iwisesoft.com/exhibition/2217/062D4AE8-0AF2-487B-9AF9-8E4729B99F03.thumb.png',
              },
              {
                url: 'https://assets.iwisesoft.com/exhibition/2217/7D18D9C4-2D8C-439A-98B1-B4E205426ADB.jpeg',
                preview:
                  'https://assets.iwisesoft.com/exhibition/2217/7D18D9C4-2D8C-439A-98B1-B4E205426ADB.thumb.png',
              },
              {
                url: 'https://assets.iwisesoft.com/exhibition/2217/84B05776-2E9F-499C-B88E-6B30259AACB0.jpeg',
                preview:
                  'https://assets.iwisesoft.com/exhibition/2217/84B05776-2E9F-499C-B88E-6B30259AACB0.thumb.png',
              },
              {
                url: 'https://assets.iwisesoft.com/exhibition/2217/AAD07E11-C226-4C69-98EB-7F3C747EFE2F.jpeg',
                preview:
                  'https://assets.iwisesoft.com/exhibition/2217/AAD07E11-C226-4C69-98EB-7F3C747EFE2F.thumb.png',
              },
              {
                url: 'https://assets.iwisesoft.com/exhibition/2217/DFB8984D-B906-43DF-9386-BC3EC4CFCEF8.jpeg',
                preview:
                  'https://assets.iwisesoft.com/exhibition/2217/DFB8984D-B906-43DF-9386-BC3EC4CFCEF8.thumb.png',
              },
            ],
            idNe: 0,
            idList: null,
          },
          {
            id: 2173,
            xxNo: '150202dhqnqjxx',
            bjNo: 'btdhnqjxx202203',
            author: '李朋锴',
            title: '优秀作业',
            memo: '作业',
            addOn: '2022-09-19 16:28:09',
            addBy: '15849288887',
            type: 0,
            typeName: '优秀作品',
            images: [
              {
                url: 'https://assets.iwisesoft.com/exhibition/2173/6ECB5DEA-1DA3-4596-BFA9-99D569085AED.jpeg',
                preview:
                  'https://assets.iwisesoft.com/exhibition/2173/6ECB5DEA-1DA3-4596-BFA9-99D569085AED.thumb.png',
              },
            ],
            idNe: 0,
            idList: null,
          },
          {
            id: 2155,
            xxNo: '150202dhqnqjxx',
            bjNo: 'btdhnqjxx202203',
            author: '一三班小朋友',
            title: '识字小报',
            memo: '生活中可以让我们认识很多的生字朋友，比比谁是识字小能手',
            addOn: '2022-09-13 17:02:46',
            addBy: '15849288887',
            type: 0,
            typeName: '优秀作品',
            images: [
              {
                url: 'https://assets.iwisesoft.com/exhibition/2155/1818D272-819D-4813-9745-C6CF52A0059E.jpeg',
                preview:
                  'https://assets.iwisesoft.com/exhibition/2155/1818D272-819D-4813-9745-C6CF52A0059E.thumb.png',
              },
              {
                url: 'https://assets.iwisesoft.com/exhibition/2155/6C37F336-80E4-4279-9934-5645E5AB8F27.jpeg',
                preview:
                  'https://assets.iwisesoft.com/exhibition/2155/6C37F336-80E4-4279-9934-5645E5AB8F27.thumb.png',
              },
              {
                url: 'https://assets.iwisesoft.com/exhibition/2155/90150549-6CD2-408D-ABDA-438DC27ED1D1.jpeg',
                preview:
                  'https://assets.iwisesoft.com/exhibition/2155/90150549-6CD2-408D-ABDA-438DC27ED1D1.thumb.png',
              },
              {
                url: 'https://assets.iwisesoft.com/exhibition/2155/CF515616-6972-4335-9A0F-730482EC87FE.jpeg',
                preview:
                  'https://assets.iwisesoft.com/exhibition/2155/CF515616-6972-4335-9A0F-730482EC87FE.thumb.png',
              },
              {
                url: 'https://assets.iwisesoft.com/exhibition/2155/F7FF7CCE-847A-446B-9C35-C9A96AECF182.jpeg',
                preview:
                  'https://assets.iwisesoft.com/exhibition/2155/F7FF7CCE-847A-446B-9C35-C9A96AECF182.thumb.png',
              },
            ],
            idNe: 0,
            idList: null,
          },
        ],
      },
    }),
    [],
  );
  const [activeTabKey, setActiveTabKey] = useState('1');
  const [excellentData, setExcellentData] = useState([]);
  const [honorData, setHonorData] = useState([]);

  useEffect(() => {
    if (exhibitionList.data?.result) {
      setExcellentData(exhibitionList.data.result.filter((x) => x.type === 0));
      setHonorData(exhibitionList.data.result.filter((x) => x.type === 1));
    }
  }, [exhibitionList]);

  return (
    <div className={classNames(styles.wrapper)} style={{ display: 'flex' }}>
      <div className={classNames('bg', 'bg-1', styles['bg-1'])} />
      <div className="bg bg-2" />
      <Row style={{ flex: 1 }}>
        <Col span={24}>
          <Row gutter={5} style={{ flex: 1, padding: '0 14px' }}>
            <Col span={12}>
              <Row
                className={classNames(
                  'linear-title',
                  styles.title,
                  activeTabKey === '1' ? '' : styles.gray,
                )}
                justify="center"
                onClick={() => setActiveTabKey('1')}
              >
                <span>优秀作品</span>
              </Row>
            </Col>
            <Col span={12}>
              <Row
                className={classNames(
                  'linear-title',
                  styles.title,
                  activeTabKey === '2' ? '' : styles.gray,
                )}
                justify="center"
                onClick={() => setActiveTabKey('2')}
              >
                <span>荣誉榜</span>
              </Row>
            </Col>
          </Row>
        </Col>
        <Col span={24}>
          <Tabs
            type="card"
            size="small"
            tabPosition="bottom"
            style={{ height: 230, width: 430 }}
            activeKey={activeTabKey}
          >
            <TabPane tab="优秀作品" key="1">
              <Carousel dotPosition="top" autoplay>
                {excellentData.length ? (
                  excellentData.map((x) => <Slick model={x} key={x.id} />)
                ) : (
                  <Empty />
                )}
              </Carousel>
            </TabPane>
            <TabPane tab="荣誉榜" key="2">
              <Carousel dotPosition="top" autoplay>
                {honorData.length ? (
                  honorData.map((x) => <Slick model={x} key={x.id} />)
                ) : (
                  <Empty />
                )}
              </Carousel>
            </TabPane>
          </Tabs>
        </Col>
      </Row>
    </div>
  );
};
